<!-- src/views/Register.vue -->
<template>
  <div class="register-page">
    <h2>注册账号</h2>
    <form @submit.prevent="submitForm" class="form">
      <input v-model="form.username" placeholder="用户名" required />
      <input v-model="form.email" type="email" placeholder="邮箱" required />
      <input v-model="form.password" type="password" placeholder="密码" required />
      <button class="btn btn-primary" type="submit">注册</button>
    </form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const form = reactive({
  username: '',
  email: '',
  password: ''
})

function submitForm() {
  console.log('注册信息：', form)
  // TODO: 发请求注册（你可以调用 API）
  alert('注册成功！请登录。')
  // 完成注册后，跳转到主页
  router.push('/')
}
</script>

<style scoped>
.register-page {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form input {
  display: block;
  margin-bottom: 16px;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.btn {
  width: 100%;
}
</style>
